<!--
  Author: 善良的YWJ
  Created by shanliangdeYWJ on 2020/09/09
  File: 05.3解决异步设置值每个组件都是独立的.html
  Description: "
  
   请输入文件描述内容
  
               " 
  Github: https://github.com/shanliangdeYWJ
-->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <title>02JSX简介</title>
  <style></style>
</head>

<body>

  <div id="root1"></div>
  <div id="root2"></div>
  <div id="root3"></div>

  <!-- 加载 React。-->
  <!-- 注意: 部署时，将 "development.js" 替换为 "production.min.js"。-->

  <script src="../js/react@16.development.js" crossorigin></script>
  <script src="../js/react-dom@16.development.js" crossorigin></script>
  <script src="../js/babel@6.min.js"></script>


  <!-- React介绍
    声明式编程 
      命令式编程 用代码告诉计算机去做什么
        面向过程
      声明式编程 代码告诉计算机我要什么，让计算机自己去想如何去做
        面向对象
  -->
  <script src="./02.1.1JSX简介.js" type="text/babel"></script>
  <!-- 加载我们的 React 组件。-->
  <!-- <script type="text/babel">
    // =========== { 1 } ===========
    // 在 JSX 中嵌入表达式
    const name = 'shanliangdeYWJ'
    const element = <h1>{name}</h1>
    ReactDOM.render(element, document.getElementById('root1'));


    // =========== { 2 } ===========
    // 格式化名字
    function formatName(user) { return user.firstName + user.lastName }
    // 名字对象
    const user = { firstName: 'shanliangde', lastName: 'YWJ' }
    // 用格式化方法格式化名字对象，返回标签
    function getGreeting(user) {
      if (user) {
        return <h1>Hello, {formatName(user)}!</h1>;
      }
      return <h1>Hello, Stranger.</h1>;
    }
    // 渲染函数
    ReactDOM.render(
      getGreeting(user),
      document.getElementById('root2')
    );

    // =========== { 3 } ===========
    // JSX 特定属性
    const element3 = <div tabIndex="0">0</div>
    const element4 = <img src="../images/avatar.jpg" alt={user.firstName} />

    ReactDOM.render(
      <div>
        {element3}
        {element4}
      </div>,
      document.getElementById('root3')
    );
  </script> -->
</body>

</html>